<template>
  <section>
    <el-card>
      <div
        class="table_content"
        style="margin-bottom: 1px"
      >
        <el-row :gutter="4">
          <el-form
            :model="searchDto"
            :inline="true"
            ref="searchForm"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="年份" prop="name">
              <el-date-picker
                v-model="searchDto.year"
                type="year"
                format="yyyy"
                value-format="yyyy"
                placeholder="选择年">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-circle-plus"
          @click="showUserViewTrue()"
        >新增居民消费
        </el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="getPageData()"
          icon="el-icon-search"
        >查询
        </el-button
        >
        <el-button
          type="primary"
          icon="el-icon-remove"
          size="small"
          @click="resetForm()"
        >重置
        </el-button
        >
      </div>
      <page-table :page-data="grandTotalList" :loading="loading" :do-get-page-data="getPageData">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="year"
          label="年份"
          sortable
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="name"
          label="类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="increase"
          label="金额"
          align="center"
        >
          <template slot-scope="scope">
              <span>{{scope.row.increase}}元</span>
          </template>
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="rate"-->
<!--          label="增长率"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.rate}}%</span>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column
          label="管理"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="userEdit(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="删除" placement="top">
              <el-button
                size="mini"
                icon="el-icon-delete"
                @click="userDel(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>

    <el-dialog
      :visible.sync="showEditorGrandTotal"
      title="编辑/新增居民消费:"
      width="40%"
    >
      <el-row>
        <el-col :span="24" class="mt20">
          <el-form
            ref="formData"
            :rules="rules"
            :model="formData"
            label-width="120px"
          >
            <el-form-item label="年份:" prop="year">
              <el-date-picker
                style="width: 100%"
                v-model="formData.year"
                type="year"
                format="yyyy"
                value-format="yyyy"
                placeholder="选择年">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="分类:" prop="type" style="width: 100%">
              <el-select v-model="formData.type" placeholder="请选择" >
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
<!--            <el-form-item label="总计:" prop="toal">-->
<!--              <el-input type="number" v-model="formData.toal" min="0" >-->
<!--                <template slot="append">亿元</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="金额:" prop="increase">
              <el-input type="number" v-model="formData.increase" min="0" >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
<!--            <el-form-item label="涨幅:" prop="increase">-->
<!--              <el-input type="number" v-model="formData.rate">-->
<!--                <template slot="append">%</template>-->
<!--              </el-input>-->
<!--            </el-form-item>-->
            <el-form-item>
                    <span style="float: left;">
                      <el-button
                        type="primary"
                        size="small"
                        @click="saveData('formData')"
                      >保存</el-button
                      >
                    </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-dialog>
  </section>
</template>

<script>
  // 居民消费
  export default {
    name: "householdConsumption",
    mounted() {
       let para = this.$route.query.category
      console.log(para)
      this.getPageData()
    },
    data() {
      return {
        searchDto: {
          year: "",
          category:"DATA_LY_CONSUM",
          pageSize: 10
        },
        rules: {
          year: {required: true, message: "请输入年份", trigger: "blur"},
          type: {required: true, message: "请选择分类", trigger: "blur"},
          increase: {required: true, message: "请输入金额 ", trigger: "blur"},
          toal: {required: true, message: "请输入总计", trigger: "blur"},
          rate: {required: true, message: "请输入增长比率", trigger: "blur"}
        },
        types: this.getChildDictionary('DATA_LY','DATA_LY_CONSUM'),
        showEditorGrandTotal: false,
        grandTotalList: {},
        loading: false,
        formData: {
          id: 0,
          year: '',
          category: 'DATA_LY_CONSUM',
          increase : 0,
          rate : '',
          type:''
        }
      };
    },
    computed: {},

    methods: {
      //重置搜索数据
      resetForm() {
        this.searchDto = {
          name: "",
          pageSize: 10
        }
        this.getPageData()
      },
      // 重置新增表单
      resetHotInfo() {
        this.$refs.formData.resetFields()
        this.getPageData()
      },
      //新建
      showUserViewTrue() {
        this.formData= {
          id: 0,
          year: '',
          category: 'DATA_LY_CONSUM',
          increase : 0,
          rate : '',
          type:''
        }
        this.showEditorGrandTotal = true;
      },
      //居民消费编辑
      userEdit(val) {
        this.formData = val
        this.showEditorGrandTotal = true;
      },

      //居民消费删除
      userDel(id) {
        this.$confirm("确认删除该数据?", "提示").then(() => {
          this.API.delAllPopulaUsingPOST({"savePopulaDetailDto": {"ids": id}}).then(res => {
            this.getPageData()
          })
        });
      },
      // 获取分页数据
      getPageData(search) {
        this.loading =true
        let tem = Object.assign(this.searchDto, search);
        this.API.populaListUsingPOST({"basePopulaSerachDto": tem}).then(res => {
          this.grandTotalList = res.data
          this.loading = false
        })
      },
      // 保存数据
      saveData(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.API.saveOrUpdatePopulaUsingPOST({'savePopulaDetailDto': this.formData}).then(res => {
              this.showEditorGrandTotal = false
              this.resetHotInfo()
            })
          } else {
            return false;
          }
        });
      }
    },
    components: {}
  };
</script>
<style scoped lang="less">
  .wanner {
    margin-left: -55px;
    padding-right: 80px;
    width: 200px;
  }

  .el-select {
    width: 218px !important
  }

  .form-lable > :first-child {
    font-size: 16px;
  }
</style>

